import React from 'react';
import {
    ColumnHeightOutlined, DownloadOutlined,
    DownOutlined, EyeOutlined, FormatPainterOutlined,
    ReloadOutlined,
    SwapOutlined,
} from '@ant-design/icons';
import {
    Space,
    Table,
} from 'antd';
import {ColumnsType} from "antd/es/table";
import AdvancedSearchForm from "./SearchForm";


const Welcome: React.FC = () => {
    const dataSource = [
        {
            platform: '用户中心',
            module: '用户资料',
            user: "Michael",
            userIp: '127.0.0.1',
            query: 'SELECT * FROM USER',
            queryTime: '2023-06-28 12:31:43',
            elapsedTime: '32 ms',
        },
        {
            platform: '用户中心',
            module: '用户资料',
            user: "Michael",
            userIp: '127.0.0.1',
            query: 'SELECT * FROM USER',
            queryTime: '2023-06-28 12:31:43',
            elapsedTime: '32 ms',
        },
    ];

    const columns = [
        {
            title: '平台',
            dataIndex: 'platform',
            key: 'platform',
        },
        {
            title: '模块',
            dataIndex: 'module',
            key: 'module',
        },
        {
            title: '用户',
            dataIndex: 'user',
            key: 'user',
        },
        {
            title: '用户IP',
            dataIndex: 'userIp',
            key: 'userIp',
        },
        {
            title: '执行SQL',
            dataIndex: 'query',
            key: 'query',
            width: "40%",
        },
        {
            title: '执行时间',
            dataIndex: 'queryTime',
            key: 'queryTime',
        },
        {
            title: '消耗时间',
            dataIndex: 'elapsedTime',
            key: 'elapsedTime',
        },
        {
            title: '操作',
            dataIndex: 'name',
            key: 'name',
            fixed: 'right',
            width: 150,
            render: () => {
                return (
                    <Space>
                        <a><EyeOutlined/> 详情</a>
                        <a> 更多 <DownOutlined style={{fontSize: "10px"}}/></a>
                    </Space>
                )
            }
        },
    ];

    const onSearch = (values: any) => {

    }


    return (
        <div>
            <AdvancedSearchForm onSearch={onSearch}/>

            <Space style={{display: "flex", justifyContent: "space-between", padding: "10px 0"}}>

                <Space align={"center"} size={"middle"}>
                    <ReloadOutlined/>
                    <DownloadOutlined/>
                    <ColumnHeightOutlined/>
                    <FormatPainterOutlined/>
                    <SwapOutlined/>
                </Space>

            </Space>

            <Table dataSource={dataSource} columns={columns as ColumnsType}
                   pagination={
                       {
                           showQuickJumper: true,
                           defaultCurrent: 2,
                           total: 500,
                           showTotal: (total) => `共 ${total} 条数据`,
                           // onChange={onChange}
                       }
                   }
            />
        </div>
    )
}
export default Welcome